Autocomplete with popup hidden, just shows input
Snapshot (no differences to highlight)
hello
Autocomplete showing dropdown with 3 matching suggestions
Expected
he
hello
greeting
help
assistance
helicopter
Actual
he
hello
greeting
help
assistance
helicopter
Overlay : Expected + Actual
he
hello
greeting
help
assistance
helicopter
he
hello
greeting
help
assistance
helicopter
Actual opacity:
50%
Snapshot (no differences to highlight)
he
hello
greeting
help
assistance
helicopter
Autocomplete with second item (application) highlighted
Expected
app
apple
application
appetite
Actual
app
apple
application
appetite
Overlay : Expected + Actual
app
apple
application
appetite
app
apple
application
appetite
Actual opacity:
50%
Snapshot (no differences to highlight)
app
apple
application
appetite
Autocomplete with no matching results - popup hidden
Snapshot (no differences to highlight)
xyz
Autocomplete with @ trigger showing matching usernames
Expected
Hello
@jo
john
joe
jordan
Actual
Hello
@jo
john
joe
jordan
Overlay : Expected + Actual
Hello
@jo
john
joe
jordan
Hello
@jo
john
joe
jordan
Actual opacity:
50%
Snapshot (no differences to highlight)
Hello
@jo
john
joe
jordan
Autocomplete with custom icon and shortcut rendering
Snapshot (no differences to highlight)
cmd
Breadcrumbs with three segments separated by >
Expected
Commands
>
File
>
Recent
Actual
Commands
>
File
>
Recent
Overlay : Expected + Actual
Commands
>
File
>
Recent
Commands
>
File
>
Recent
Actual opacity:
50%
Snapshot (no differences to highlight)
Commands
>
File
>
Recent
Unchecked checkbox with label in default Text color (unfocused)
Expected
[]
☐
Accept
terms
Overlay : Expected + Actual
[]
☐
Accept
terms
[]
☐
Accept
terms
Actual opacity:
50%
Snapshot (no differences to highlight)
[]
☐
Accept
terms
Checked checkbox with label in default Text color (unfocused)
Expected
[]
☑
Accept
terms
Overlay : Expected + Actual
[]
☑
Accept
terms
[]
☑
Accept
terms
Actual opacity:
50%
Snapshot (no differences to highlight)
[]
☑
Accept
terms
Unchecked checkbox with ActiveCursor background and SelectionText foreground
Overlay : Expected + Actual
☐
Accept
terms
☐
Accept
terms
Actual opacity:
50%
Snapshot (no differences to highlight)
☐
Accept
terms
Checked checkbox with ActiveCursor background and SelectionText foreground
Overlay : Expected + Actual
☑
Accept
terms
☑
Accept
terms
Actual opacity:
50%
Snapshot (no differences to highlight)
☑
Accept
terms
Unchecked disabled checkbox with TextDisabled color
Overlay : Expected + Actual
☐
Accept
terms
☐
Accept
terms
Actual opacity:
50%
Snapshot (no differences to highlight)
☐
Accept
terms
Checked disabled checkbox with TextDisabled color
Overlay : Expected + Actual
☑
Accept
terms
☑
Accept
terms
Actual opacity:
50%
Snapshot (no differences to highlight)
☑
Accept
terms
Checked checkbox indicator only, no label text
Snapshot (no differences to highlight)
☑
Unchecked checkbox indicator only, no label text
Snapshot (no differences to highlight)
☐
Command palette with filter text, divider, disabled item, and hint widget
Expected
Commands
o
p
Op
en
File
Ctrl+O
Open
from
disk
Edit
─────────────────────────────────────────────────────
C
op
y
Ctrl+C
Actual
Commands
o
p
Op
en
File
Ctrl+O
Open
from
disk
Edit
─────────────────────────────────────────────────────
C
op
y
Ctrl+C
Overlay : Expected + Actual
Commands
o
p
Op
en
File
Ctrl+O
Open
from
disk
Edit
─────────────────────────────────────────────────────
C
op
y
Ctrl+C
Commands
o
p
Op
en
File
Ctrl+O
Open
from
disk
Edit
─────────────────────────────────────────────────────
C
op
y
Ctrl+C
Actual opacity:
50%
Snapshot (no differences to highlight)
Commands
o
p
Op
en
File
Ctrl+O
Open
from
disk
Edit
─────────────────────────────────────────────────────
C
op
y
Ctrl+C
Nested command palette showing breadcrumbs and theme options
Expected
Commands
>
Theme
T
ype
to
search...
Rose
Pine
Dracula
Actual
Commands
>
Theme
T
ype
to
search...
Rose
Pine
Dracula
Overlay : Expected + Actual
Commands
>
Theme
T
ype
to
search...
Rose
Pine
Dracula
Commands
>
Theme
T
ype
to
search...
Rose
Pine
Dracula
Actual opacity:
50%
Snapshot (no differences to highlight)
Commands
>
Theme
T
ype
to
search...
Rose
Pine
Dracula
Command palette showing empty state when no items match the filter
Expected
Commands
z
zz
No
results
Actual
Commands
z
zz
No
results
Overlay : Expected + Actual
Commands
z
zz
No
results
Commands
z
zz
No
results
Actual opacity:
50%
Snapshot (no differences to highlight)
Commands
z
zz
No
results
Two items visible: 'Apple' and 'Apricot' with 'ap' highlighted in accent color
Overlay : Expected + Actual
Ap
ple
Ap
ricot
Ap
ple
Ap
ricot
Actual opacity:
50%
Snapshot (no differences to highlight)
Ap
ple
Ap
ricot
Only 'Apple' visible (exact case match), lowercase 'apple' and uppercase 'APPLE' filtered out
Snapshot (no differences to highlight)
Apple
One item visible: 'JavaScript' with fuzzy-matched characters 'J', 'S', 'c' highlighted
Overlay : Expected + Actual
J
ava
Sc
ript
J
ava
Sc
ript
Actual opacity:
50%
Snapshot (no differences to highlight)
J
ava
Sc
ript
Empty list - no items match the query 'xyz'
Snapshot (no differences to highlight)
All three items visible - empty query shows unfiltered list
Expected
Apple
Banana
Cherry
Actual
Apple
Banana
Cherry
Overlay : Expected + Actual
Apple
Banana
Cherry
Apple
Banana
Cherry
Actual opacity:
50%
Snapshot (no differences to highlight)
Apple
Banana
Cherry
Two filtered items with cursor (▶) on 'Apple', both showing 'ap' highlighted
Overlay : Expected + Actual
Ap
ple
Ap
ricot
Ap
ple
Ap
ricot
Actual opacity:
50%
Snapshot (no differences to highlight)
Ap
ple
Ap
ricot
Only 'First (100)' visible - custom matcher filters by Name field only
Overlay : Expected + Actual
▶
First
(100)
▶
First
(100)
Actual opacity:
50%
Snapshot (no differences to highlight)
▶
First
(100)
Two items with 'ap' highlighted in accent color with underline on both 'Apple' and 'Apricot'
Expected
Ap
ple
Pie
Ap
ricot
Tart
Actual
Ap
ple
Pie
Ap
ricot
Tart
Overlay : Expected + Actual
Ap
ple
Pie
Ap
ricot
Tart
Ap
ple
Pie
Ap
ricot
Tart
Actual opacity:
50%
Snapshot (no differences to highlight)
Ap
ple
Pie
Ap
ricot
Tart
Two rows visible: Alice and Charlie, both with 'Engineer' highlighted in the role column
Expected
Alice
Engineer
NYC
Charlie
Engineer
SF
Actual
Alice
Engineer
NYC
Charlie
Engineer
SF
Overlay : Expected + Actual
Alice
Engineer
NYC
Charlie
Engineer
SF
Alice
Engineer
NYC
Charlie
Engineer
SF
Actual opacity:
50%
Snapshot (no differences to highlight)
Alice
Engineer
NYC
Charlie
Engineer
SF
Only first row visible with 'Alice' highlighted - case-sensitive match excludes 'ALICE' row
Expected
Alice
alice@example.com
Actual
Alice
alice@example.com
Overlay : Expected + Actual
Alice
alice@example.com
Alice
alice@example.com
Actual opacity:
50%
Snapshot (no differences to highlight)
Alice
alice@example.com
One row visible: 'JavaScript' with fuzzy-matched characters 'J', 'S', 'c' highlighted
Expected
J
ava
Sc
ript
Frontend
Actual
J
ava
Sc
ript
Frontend
Overlay : Expected + Actual
J
ava
Sc
ript
Frontend
J
ava
Sc
ript
Frontend
Actual opacity:
50%
Snapshot (no differences to highlight)
J
ava
Sc
ript
Frontend
Empty table - no rows match the query 'xyz'
Snapshot (no differences to highlight)
All three rows visible - empty query shows unfiltered table
Expected
Alice
Engineer
Bob
Designer
Charlie
Manager
Actual
Alice
Engineer
Bob
Designer
Charlie
Manager
Overlay : Expected + Actual
Alice
Engineer
Bob
Designer
Charlie
Manager
Alice
Engineer
Bob
Designer
Charlie
Manager
Actual opacity:
50%
Snapshot (no differences to highlight)
Alice
Engineer
Bob
Designer
Charlie
Manager
Two filtered rows with Alice row highlighted (active), both showing 'Engineer' with match highlighting
Expected
Alice
Engineer
Charlie
Engineer
Actual
Alice
Engineer
Charlie
Engineer
Overlay : Expected + Actual
Alice
Engineer
Charlie
Engineer
Alice
Engineer
Charlie
Engineer
Actual opacity:
50%
Snapshot (no differences to highlight)
Alice
Engineer
Charlie
Engineer
Header row visible (Name, Role, City) followed by two filtered data rows with 'Engineer' highlighted
Expected
Name
Role
City
Alice
Engineer
NYC
Charlie
Engineer
SF
Actual
Name
Role
City
Alice
Engineer
NYC
Charlie
Engineer
SF
Overlay : Expected + Actual
Name
Role
City
Alice
Engineer
NYC
Charlie
Engineer
SF
Name
Role
City
Alice
Engineer
NYC
Charlie
Engineer
SF
Actual opacity:
50%
Snapshot (no differences to highlight)
Name
Role
City
Alice
Engineer
NYC
Charlie
Engineer
SF
Only Alice row visible - custom renderer shows plain text without highlighting
Snapshot (no differences to highlight)
Alice
30
Two rows visible with 'ap' highlighted in accent color in first column of each row
Expected
Ap
ple
Inc
Technology
Ap
ricot
Co
Food
Actual
Ap
ple
Inc
Technology
Ap
ricot
Co
Food
Overlay : Expected + Actual
Ap
ple
Inc
Technology
Ap
ricot
Co
Food
Ap
ple
Inc
Technology
Ap
ricot
Co
Food
Actual opacity:
50%
Snapshot (no differences to highlight)
Ap
ple
Inc
Technology
Ap
ricot
Co
Food
Two items visible with all occurrences of 'apple' highlighted (3x in first item, 1x in second)
Expected
apple
apple
apple
apple
pie
Actual
apple
apple
apple
apple
pie
Overlay : Expected + Actual
apple
apple
apple
apple
pie
apple
apple
apple
apple
pie
Actual opacity:
50%
Snapshot (no differences to highlight)
apple
apple
apple
apple
pie
Two rows visible: Alice (NYC in city column) and NYC Admin (NYC in both name and city columns)
Expected
Alice
Engineer
NYC
NYC
Admin
Manager
NYC
Actual
Alice
Engineer
NYC
NYC
Admin
Manager
NYC
Overlay : Expected + Actual
Alice
Engineer
NYC
NYC
Admin
Manager
NYC
Alice
Engineer
NYC
NYC
Admin
Manager
NYC
Actual opacity:
50%
Snapshot (no differences to highlight)
Alice
Engineer
NYC
NYC
Admin
Manager
NYC
TextInput with #world highlighted in blue bold.
Expected
h
ello
#world
today
Actual
h
ello
#world
today
Overlay : Expected + Actual
h
ello
#world
today
h
ello
#world
today
Actual opacity:
50%
Snapshot (no differences to highlight)
h
ello
#world
today
TextInput with two hashtags highlighted in orange italic.
Expected
c
heck
#tag1
and
#tag2
now
Actual
c
heck
#tag1
and
#tag2
now
Overlay : Expected + Actual
c
heck
#tag1
and
#tag2
now
c
heck
#tag1
and
#tag2
now
Actual opacity:
50%
Snapshot (no differences to highlight)
c
heck
#tag1
and
#tag2
now
TextInput scrolled right with highlight partially/fully visible.
Overlay : Expected + Actual
ed
suffix
text
ed
suffix
text
Actual opacity:
50%
Snapshot (no differences to highlight)
ed
suffix
text
TextInput with cursor on highlighted text. Cursor (reverse) takes precedence over highlight.
Expected
hello
#t
a
g
world
Actual
hello
#t
a
g
world
Overlay : Expected + Actual
hello
#t
a
g
world
hello
#t
a
g
world
Actual opacity:
50%
Snapshot (no differences to highlight)
hello
#t
a
g
world
TextArea with #world and #test highlighted in blue bold.
Expected
h
ello
#world
this
is
a
#test
Actual
h
ello
#world
this
is
a
#test
Overlay : Expected + Actual
h
ello
#world
this
is
a
#test
h
ello
#world
this
is
a
#test
Actual opacity:
50%
Snapshot (no differences to highlight)
h
ello
#world
this
is
a
#test
TextArea with line 1 highlighted with blue background.
Expected
l
ine
0
line
1
line
2
line
3
Actual
l
ine
0
line
1
line
2
line
3
Overlay : Expected + Actual
l
ine
0
line
1
line
2
line
3
l
ine
0
line
1
line
2
line
3
Actual opacity:
50%
Snapshot (no differences to highlight)
l
ine
0
line
1
line
2
line
3
TextArea with lines 1-3 highlighted with red-ish background.
Expected
l
ine
0
line
1
line
2
line
3
line
4
Actual
l
ine
0
line
1
line
2
line
3
line
4
Overlay : Expected + Actual
l
ine
0
line
1
line
2
line
3
line
4
l
ine
0
line
1
line
2
line
3
line
4
Actual opacity:
50%
Snapshot (no differences to highlight)
l
ine
0
line
1
line
2
line
3
line
4
TextArea with #tag text highlighted AND line 1 with red background (error line).
Expected
c
heck
#tag
here
error
line
normal
line
Actual
c
heck
#tag
here
error
line
normal
line
Overlay : Expected + Actual
c
heck
#tag
here
error
line
normal
line
c
heck
#tag
here
error
line
normal
line
Actual opacity:
50%
Snapshot (no differences to highlight)
c
heck
#tag
here
error
line
normal
line
TextArea with selection over highlighted text. Selection background takes precedence.
Expected
select
#highlighted
text
Actual
select
#highlighted
text
Overlay : Expected + Actual
select
#highlighted
text
select
#highlighted
text
Actual opacity:
50%
Snapshot (no differences to highlight)
select
#highlighted
text
TextArea scrolled to show bottom lines with #tag highlighted.
Expected
line
2
#tag
line
3
line
4
Actual
line
2
#tag
line
3
line
4
Overlay : Expected + Actual
line
2
#tag
line
3
line
4
line
2
#tag
line
3
line
4
Actual opacity:
50%
Snapshot (no differences to highlight)
line
2
#tag
line
3
line
4
TextArea with lines 2 onwards highlighted with green background (EndLine=-1).
Expected
l
ine
0
line
1
line
2
line
3
Actual
l
ine
0
line
1
line
2
line
3
Overlay : Expected + Actual
l
ine
0
line
1
line
2
line
3
l
ine
0
line
1
line
2
line
3
Actual opacity:
50%
Snapshot (no differences to highlight)
l
ine
0
line
1
line
2
line
3
Menu with active 'Open' item, shortcut alignment, titled divider, disabled 'Export', and 'Recent' submenu indicator.
Expected
Open
Ctrl+O
Save
As
Ctrl+Shift+S
Export
──────────────
Export
Recent
▸
Actual
Open
Ctrl+O
Save
As
Ctrl+Shift+S
Export
──────────────
Export
Recent
▸
Overlay : Expected + Actual
Open
Ctrl+O
Save
As
Ctrl+Shift+S
Export
──────────────
Export
Recent
▸
Open
Ctrl+O
Save
As
Ctrl+Shift+S
Export
──────────────
Export
Recent
▸
Actual opacity:
50%
Snapshot (no differences to highlight)
Open
Ctrl+O
Save
As
Ctrl+Shift+S
Export
──────────────
Export
Recent
▸
Menu with 'Edit' submenu open to the right. Parent menu shows active item and submenu arrow.
Expected
File
▸
Edit
▸
Cut
Help
Copy
Paste
Actual
File
▸
Edit
▸
Cut
Help
Copy
Paste
Overlay : Expected + Actual
File
▸
Edit
▸
Cut
Help
Copy
Paste
File
▸
Edit
▸
Cut
Help
Copy
Paste
Actual opacity:
50%
Snapshot (no differences to highlight)
File
▸
Edit
▸
Cut
Help
Copy
Paste
White 'Hello, World!!' text at top-left. Width auto-sized to 14 characters.
Overlay : Expected + Actual
Hello,
World!!
Hello,
World!!
Actual opacity:
50%
Snapshot (no differences to highlight)
Hello,
World!!
Rich text: 'Bold' in bold, ' and ' in normal, 'Italic' in italic. All white on black, single line.
Overlay : Expected + Actual
Bold
and
Italic
Bold
and
Italic
Actual opacity:
50%
Snapshot (no differences to highlight)
Bold
and
Italic
Long text extends beyond 20-cell boundary, no wrapping. Only first 20 characters visible: 'This is a very long '.
Expected
This
is
a
very
long
Actual
This
is
a
very
long
Overlay : Expected + Actual
This
is
a
very
long
This
is
a
very
long
Actual opacity:
50%
Snapshot (no differences to highlight)
This
is
a
very
long
Text wraps at word boundaries within 15-cell width. Multiple lines, words not broken mid-word.
Expected
This
is
a
line
that
should
wrap
at
word
boundaries
Actual
This
is
a
line
that
should
wrap
at
word
boundaries
Overlay : Expected + Actual
This
is
a
line
that
should
wrap
at
word
boundaries
This
is
a
line
that
should
wrap
at
word
boundaries
Actual opacity:
50%
Snapshot (no differences to highlight)
This
is
a
line
that
should
wrap
at
word
boundaries
Long word broken at exactly 10 characters per line. Word split mid-character across multiple lines.
Expected
Supercalif
ragilistic
expialidoc
ious
Actual
Supercalif
ragilistic
expialidoc
ious
Overlay : Expected + Actual
Supercalif
ragilistic
expialidoc
ious
Supercalif
ragilistic
expialidoc
ious
Actual opacity:
50%
Snapshot (no differences to highlight)
Supercalif
ragilistic
expialidoc
ious
Three text rows showing style variations. 'Bold' in bold on row 1, 'Italic' in italic on row 2, 'Underline' underlined on row 3.
Expected
Bold
Italic
Underline
Actual
Bold
Italic
Underline
Overlay : Expected + Actual
Bold
Italic
Underline
Bold
Italic
Underline
Actual opacity:
50%
Snapshot (no differences to highlight)
Bold
Italic
Underline
White 'Highlighted' text on purple/blue background. Background extends to text width only.
Snapshot (no differences to highlight)
Highlighted
Three lines of text from explicit newlines. 'Line 1' on row 1, 'Line 2' on row 2, 'Line 3' on row 3.
Expected
Line
1
Line
2
Line
3
Actual
Line
1
Line
2
Line
3
Overlay : Expected + Actual
Line
1
Line
2
Line
3
Line
1
Line
2
Line
3
Actual opacity:
50%
Snapshot (no differences to highlight)
Line
1
Line
2
Line
3
Red/pink 'Colored' text on black background. Text color is RGB(255,100,100).
Snapshot (no differences to highlight)
Colored
Text 'Left' aligned to the left edge within 20-cell width. Default alignment behavior.
Snapshot (no differences to highlight)
Left
Text 'Center' horizontally centered within 20-cell width. Equal spacing on both sides.
Snapshot (no differences to highlight)
Center
Text 'Right' aligned to the right edge within 20-cell width. Text starts at column 15.
Snapshot (no differences to highlight)
Right
Three centered lines. Each line independently centered within 20-cell width.
Expected
Line
1
Longer
Line
2
L3
Actual
Line
1
Longer
Line
2
L3
Overlay : Expected + Actual
Line
1
Longer
Line
2
L3
Line
1
Longer
Line
2
L3
Actual opacity:
50%
Snapshot (no differences to highlight)
Line
1
Longer
Line
2
L3
Three right-aligned lines. Each line independently aligned to right edge.
Expected
Short
Medium
text
A
Actual
Short
Medium
text
A
Overlay : Expected + Actual
Short
Medium
text
A
Short
Medium
text
A
Actual opacity:
50%
Snapshot (no differences to highlight)
Short
Medium
text
A
Text wraps at word boundaries, each wrapped line is centered within 15-cell width.
Expected
This
is
a
line
that
wraps
Actual
This
is
a
line
that
wraps
Overlay : Expected + Actual
This
is
a
line
that
wraps
This
is
a
line
that
wraps
Actual opacity:
50%
Snapshot (no differences to highlight)
This
is
a
line
that
wraps
Text wraps at word boundaries, each wrapped line is right-aligned within 12-cell width.
Expected
This
text
will
wrap
Actual
This
text
will
wrap
Overlay : Expected + Actual
This
text
will
wrap
This
text
will
wrap
Actual opacity:
50%
Snapshot (no differences to highlight)
This
text
will
wrap
Rich text 'Bold text' centered. 'Bold' in bold style, ' text' in normal style.
Snapshot (no differences to highlight)
Bold
text
Rich text 'Right aligned' aligned to right edge. 'Right ' in italic, 'aligned' in normal.
Overlay : Expected + Actual
Right
aligned
Right
aligned
Actual opacity:
50%
Snapshot (no differences to highlight)
Right
aligned
Button with 'Click Me' label. Default styling, width auto-sized to label.
Overlay : Expected + Actual
[
Click
Me
]
[
Click
Me
]
Actual opacity:
50%
Snapshot (no differences to highlight)
[
Click
Me
]
Button with 'Styled' label. White text on purple background (RGB 100,50,150).
Snapshot (no differences to highlight)
[
Styled
]
Button 'Wide' with fixed 15-cell width. Label centered within the button area.
Snapshot (no differences to highlight)
[
Wide
]
List with 3 items vertically stacked. First item 'Item 1' is active (highlighted). Items 2 and 3 below.
Expected
Item
1
Item
2
Item
3
Actual
Item
1
Item
2
Item
3
Overlay : Expected + Actual
Item
1
Item
2
Item
3
Item
1
Item
2
Item
3
Actual opacity:
50%
Snapshot (no differences to highlight)
Item
1
Item
2
Item
3
List with 3 items. 'Second' (index 1) is active and highlighted. 'First' above, 'Third' below.
Expected
First
Second
Third
Actual
First
Second
Third
Overlay : Expected + Actual
First
Second
Third
First
Second
Third
Actual opacity:
50%
Snapshot (no differences to highlight)
First
Second
Third
Empty list with no items. Should render as empty space with no visible content.
Snapshot (no differences to highlight)
List with custom render showing checkboxes. '[*] A' active on row 1, '[ ] B' and '[ ] C' below.
Expected
[*]
A
[
]
B
[
]
C
Overlay : Expected + Actual
[*]
A
[
]
B
[
]
C
[*]
A
[
]
B
[
]
C
Actual opacity:
50%
Snapshot (no differences to highlight)
[*]
A
[
]
B
[
]
C
Multi-select list with items 0 and 2 selected. 'Option 1' and 'Option 3' shown as selected, 'Option 2' unselected.
Expected
Option
1
Option
2
Option
3
Actual
Option
1
Option
2
Option
3
Overlay : Expected + Actual
Option
1
Option
2
Option
3
Option
1
Option
2
Option
3
Actual opacity:
50%
Snapshot (no differences to highlight)
Option
1
Option
2
Option
3
20-cell progress bar at 0%. Entire bar shows unfilled/empty state.
Snapshot (no differences to highlight)
20-cell progress bar at 50%. Left 10 cells filled, right 10 cells unfilled.
Snapshot (no differences to highlight)
██████████
20-cell progress bar at 100%. Entire bar shows filled state.
Expected
████████████████████
Actual
████████████████████
Overlay : Expected + Actual
████████████████████
████████████████████
Actual opacity:
50%
Snapshot (no differences to highlight)
████████████████████
20-cell progress bar at 75%. Green filled portion (15 cells), dark gray unfilled (5 cells).
Overlay : Expected + Actual
███████████████
███████████████
Actual opacity:
50%
Snapshot (no differences to highlight)
███████████████
20-cell progress bar at 25%. Left 5 cells filled, right 15 cells unfilled.
Snapshot (no differences to highlight)
█████
30-cell row with 'Left' at column 1 and 'Right' at far right. Spacer fills gap between them.
Snapshot (no differences to highlight)
Left
Right
Row with 'A' at column 1, 5-cell fixed gap, then 'B' at column 7. Total width is 7 cells.
Snapshot (no differences to highlight)
A
B
10-row column with 'Top' at row 1 and 'Bottom' at row 10. Spacer fills 8 rows between them.
Snapshot (no differences to highlight)
Top
Bottom
40-cell row with 'A', 'B', 'C' evenly distributed. Two spacers split remaining space equally.
Snapshot (no differences to highlight)
A
B
C
Column with 'Visible' on row 1 (shown because condition is true), 'Always' on row 2.
Overlay : Expected + Actual
Visible
Always
Visible
Always
Actual opacity:
50%
Snapshot (no differences to highlight)
Visible
Always
Column with only 'Always' on row 1. 'Hidden' is removed (condition false), takes no space.
Snapshot (no differences to highlight)
Always
Column with only 'Always' on row 1. 'Hidden' is removed (hide condition true), takes no space.
Snapshot (no differences to highlight)
Always
Column with 'Visible' on row 1 (shown because hide condition is false), 'Always' on row 2.
Overlay : Expected + Actual
Visible
Always
Visible
Always
Actual opacity:
50%
Snapshot (no differences to highlight)
Visible
Always
Only 'Page One' visible (active key is 'page1'). 'Page Two' not rendered.
Snapshot (no differences to highlight)
Page
One
Only 'Second' visible (active key is 'page2'). 'First' and 'Third' not rendered.
Snapshot (no differences to highlight)
Second
Empty/no content visible. Active key 'nonexistent' doesn't match any child key.
Snapshot (no differences to highlight)
Three text items stacked vertically at top-left. Red 'First' on row 1, green 'Second' on row 2, blue 'Third' on row 3. Each sized to content width.
Expected
First
Second
Third
Actual
First
Second
Third
Overlay : Expected + Actual
First
Second
Third
First
Second
Third
Actual opacity:
50%
Snapshot (no differences to highlight)
First
Second
Third
Blue 'Top' text at row 1 (top edge). Column is 10 rows tall with empty space below the text.
Snapshot (no differences to highlight)
Top
Blue 'Centered' text vertically centered around row 5. Equal empty space above and below.
Snapshot (no differences to highlight)
Centered
Blue 'Bottom' text at row 10 (bottom edge). Column is 10 rows tall with empty space above the text.
Snapshot (no differences to highlight)
Bottom
Blue text background stretches full 20-cell width. Text 'Stretched' left-aligned within the stretched area.
Snapshot (no differences to highlight)
Stretched
Blue 'Left' text at left edge (column 1). Text width matches content, not stretched. Column is 20 cells wide.
Snapshot (no differences to highlight)
Left
Blue 'CenterH' text horizontally centered in 20-cell column. Equal empty space on left and right.
Snapshot (no differences to highlight)
CenterH
Blue 'Right' text at right edge of 20-cell column. Empty space on left, text aligned to column 20.
Snapshot (no differences to highlight)
Right
Three items stacked vertically with 2-row gaps. Red 'A' at row 1, green 'B' at row 4, blue 'C' at row 7.
Snapshot (no differences to highlight)
A
B
C
Gray outer column with two nested columns stacked. Red column with 'Nested1' on row 1, blue column with 'Nested2' on row 2.
Overlay : Expected + Actual
Nested1
Nested2
Nested1
Nested2
Actual opacity:
50%
Snapshot (no differences to highlight)
Nested1
Nested2
10-row column with mixed heights. Red 'Fixed' takes 2 rows, green 'Flex' expands to fill 7 rows, blue 'Auto' takes 1 row at bottom.
Overlay : Expected + Actual
Fixed
Flex
Auto
Fixed
Flex
Auto
Actual opacity:
50%
Snapshot (no differences to highlight)
Fixed
Flex
Auto
Three single-char items in a horizontal row. Red 'A' at column 1, green 'B' at column 2, blue 'C' at column 3. All on row 1.
Snapshot (no differences to highlight)
A
B
C
Blue 'Left' text at left edge (column 1). Row is 20 cells wide with empty space to the right.
Snapshot (no differences to highlight)
Left
Blue 'Mid' text horizontally centered in 20-cell row. Equal empty space on left and right.
Snapshot (no differences to highlight)
Mid
Blue 'Right' text at right edge of 20-cell row. Empty space on left, text ends at column 20.
Snapshot (no differences to highlight)
Right
Blue background stretches full 5-row height. Text 'Tall' at top within the stretched area.
Snapshot (no differences to highlight)
Tall
Blue 'Top' text at row 1 (top edge). Row is 5 rows tall, text height matches content.
Snapshot (no differences to highlight)
Top
Blue 'CenterV' text vertically centered in 5-row container. Equal empty space above and below.
Snapshot (no differences to highlight)
CenterV
Blue 'Bottom' text at row 5 (bottom edge). Empty space above the text.
Snapshot (no differences to highlight)
Bottom
Three items in horizontal row with 2-column gaps. Red 'X' at column 1, green 'Y' at column 4, blue 'Z' at column 7.
Snapshot (no differences to highlight)
X
Y
Z
Gray outer row with two nested rows side by side. Red row with 'Inner1' on left, blue row with 'Inner2' on right.
Overlay : Expected + Actual
Inner1
Inner2
Inner1
Inner2
Actual opacity:
50%
Snapshot (no differences to highlight)
Inner1
Inner2
30-cell row with mixed widths. Red 'Fixed' takes 5 columns, green 'Flex' expands to fill remaining space, blue 'Auto' sized to content.
Overlay : Expected + Actual
Fixed
Flex
Auto
Fixed
Flex
Auto
Actual opacity:
50%
Snapshot (no differences to highlight)
Fixed
Flex
Auto
Red 'Header' docked at top (row 1, full width). Blue 'Body' fills remaining space below.
Snapshot (no differences to highlight)
Header
Body
Red 'Footer' docked at bottom (row 10, full width). Blue 'Body' fills remaining space above.
Snapshot (no differences to highlight)
Body
Footer
Red 'Side' docked at left (full height). Blue 'Main' fills remaining space to the right.
Snapshot (no differences to highlight)
Side
Main
Red 'Aside' docked at right (full height). Blue 'Main' fills remaining space to the left.
Snapshot (no differences to highlight)
Main
Aside
All edges docked. Red top, orange bottom, green left, purple right. Blue 'Center' fills middle area.
Expected
Broken
Left
Center
Right
Bottom
Actual
Broken
Left
Center
Right
Bottom
Overlay : Expected + Actual
Broken
Left
Center
Right
Bottom
Broken
Left
Center
Right
Bottom
Actual opacity:
50%
Snapshot (no differences to highlight)
Broken
Left
Center
Right
Bottom
Red 'Header' takes 2 rows at top. Blue body with text fills remaining 8 rows.
Expected
Header
Content
fills
the
rest
Actual
Header
Content
fills
the
rest
Overlay : Expected + Actual
Header
Content
fills
the
rest
Header
Content
fills
the
rest
Actual opacity:
50%
Snapshot (no differences to highlight)
Header
Content
fills
the
rest
Two widgets docked at top: red 'Toolbar1' on row 1, orange 'Toolbar2' on row 2. Blue 'Content' below.
Expected
Toolbar1
Toolbar2
Content
Actual
Toolbar1
Toolbar2
Content
Overlay : Expected + Actual
Toolbar1
Toolbar2
Content
Toolbar1
Toolbar2
Content
Actual opacity:
50%
Snapshot (no differences to highlight)
Toolbar1
Toolbar2
Content
Blue text 'Auto sized' at top-left. Width automatically sized to 10 characters (content width).
Snapshot (no differences to highlight)
Auto
sized
Blue column exactly 10 cells wide by 5 cells tall. 'Fixed' text at top-left of column.
Snapshot (no differences to highlight)
Fixed
30-cell row split proportionally. Red '1' takes 10 cells (1/3), green '2' takes 20 cells (2/3).
Snapshot (no differences to highlight)
1
2
30-cell row. Red 'Fixed' takes exactly 10 cells. Green 'Flex' expands to fill remaining 20 cells.
Snapshot (no differences to highlight)
Fixed
Flex
10-row column split equally. Red row with 'Nested Flex' takes top 5 rows, blue row with 'Another Flex' takes bottom 5 rows.
Expected
Nested
Flex
Another
Flex
Actual
Nested
Flex
Another
Flex
Overlay : Expected + Actual
Nested
Flex
Another
Flex
Nested
Flex
Another
Flex
Actual opacity:
50%
Snapshot (no differences to highlight)
Nested
Flex
Another
Flex
Gray column containing red row on top, blue text below. Red row has 'Left' and 'Right' side by side.
Overlay : Expected + Actual
LeftRight
Below
LeftRight
Below
Actual opacity:
50%
Snapshot (no differences to highlight)
LeftRight
Below
Gray row containing red column on left, blue 'Beside' on right. Red column has 'Top' and 'Bottom' stacked.
Expected
Top
Beside
Bottom
Overlay : Expected + Actual
Top
Beside
Bottom
Top
Beside
Bottom
Actual opacity:
50%
Snapshot (no differences to highlight)
Top
Beside
Bottom
Dock with red header row containing 'Logo' and 'Menu'. Blue column body with 'Section1' and 'Section2' stacked below.
Expected
LogoMenu
Section1
Section2
Actual
LogoMenu
Section1
Section2
Overlay : Expected + Actual
LogoMenu
Section1
Section2
LogoMenu
Section1
Section2
Actual opacity:
50%
Snapshot (no differences to highlight)
LogoMenu
Section1
Section2
Gray 20x5 stack. Green 'Top' overlays red 'Bottom', both at top-left. Green fully covers red since they overlap at same position.
Snapshot (no differences to highlight)
Top
tom
Gray 25x6 stack with three overlapping layers. Blue 'Layer3-Top' visible on top, covering green and red beneath.
Overlay : Expected + Actual
Layer3-Top
k
Layer3-Top
k
Actual opacity:
50%
Snapshot (no differences to highlight)
Layer3-Top
k
Stack auto-sized to fit longest child. Green 'This is much longer' visible, red 'Short' hidden beneath. Stack width matches green text.
Expected
This
is
much
longer
Actual
This
is
much
longer
Overlay : Expected + Actual
This
is
much
longer
This
is
much
longer
Actual opacity:
50%
Snapshot (no differences to highlight)
This
is
much
longer
Gray 20x6 stack. Blue 'TopLeft' at top-left corner (row 1, column 1).
Snapshot (no differences to highlight)
TopLeft
Gray 20x6 stack. Blue 'Center' at center of stack, both horizontally and vertically.
Snapshot (no differences to highlight)
Center
Gray 20x6 stack. Blue 'BotRight' at bottom-right corner (row 6, right-aligned).
Snapshot (no differences to highlight)
BotRight
Gray 20x6 stack. Blue 'BotMid' at bottom, horizontally centered (row 6).
Snapshot (no differences to highlight)
BotMid
Gray 20x6 stack. Blue 'At 2,1' positioned at row 2 (1 from top), column 3 (2 from left).
Snapshot (no differences to highlight)
At
2,1
Gray 20x6 stack. Blue 'BotRight' positioned 1 row from bottom, 2 columns from right edge.
Snapshot (no differences to highlight)
BotRight
Gray 20x5 stack completely filled by blue background. Text 'Fills' at top-left, blue covers entire stack area.
Snapshot (no differences to highlight)
Fills
Gray 20x5 stack. Blue text at row 2, stretched horizontally with 2-cell margins on left and right (16 cells wide).
Snapshot (no differences to highlight)
Stretched
H
Gray 20x6 stack. Blue 'V' stretched vertically from row 2 to row 5 (4 rows), starting at column 3.
Snapshot (no differences to highlight)
V
Gray 15x5 stack with blue 'Base' at top-left. Red 'Badge' overflows stack bounds: 1 row above top, 2 columns right of stack edge.
Snapshot (no differences to highlight)
Base
Gray 10x3 stack. Blue text exceeds stack width, content overflows and is clipped at stack boundary.
Snapshot (no differences to highlight)
This
text
Gray 20x5 stack with layered content. Red 15x4 column at origin with 'Background' and 'Content'. Blue 12x3 'Overlay' partially covers red, offset to row 2, column 6.
Expected
Background
Conte
Overlay
Actual
Background
Conte
Overlay
Overlay : Expected + Actual
Background
Conte
Overlay
Background
Conte
Overlay
Actual opacity:
50%
Snapshot (no differences to highlight)
Background
Conte
Overlay
Gray 25x8 stack with three cascading cards. Red 'Card 1' at top-left, green 'Card 2' overlaps at row 3/col 7, blue 'Card 3' overlaps at row 5/col 13. Each card partially visible.
Expected
Card
1
Card
2
Card
3
Actual
Card
1
Card
2
Card
3
Overlay : Expected + Actual
Card
1
Card
2
Card
3
Card
1
Card
2
Card
3
Actual opacity:
50%
Snapshot (no differences to highlight)
Card
1
Card
2
Card
3
Gray 20x5 stack with purple rounded border. Blue 'Bordered Stack' at top-left inside border. Border adds 1 cell each side.
Expected
╭────────────────────╮
│
Bordered
Stack
│
│
│
│
│
│
│
│
│
╰────────────────────╯
Actual
╭────────────────────╮
│
Bordered
Stack
│
│
│
│
│
│
│
│
│
╰────────────────────╯
Overlay : Expected + Actual
╭────────────────────╮
│
Bordered
Stack
│
│
│
│
│
│
│
│
│
╰────────────────────╯
╭────────────────────╮
│
Bordered
Stack
│
│
│
│
│
│
│
│
│
╰────────────────────╯
Actual opacity:
50%
Snapshot (no differences to highlight)
╭────────────────────╮
│
Bordered
Stack
│
│
│
│
│
│
│
│
│
╰────────────────────╯
Gray 20x6 stack with 1-cell padding. Blue 'Padded' inset by 1 cell from all edges, gray padding visible around content.
Snapshot (no differences to highlight)
Padded
Gray 22x7 stack with purple square border and 1-cell padding. Blue 'At origin' positioned at border-box origin, overlapping the border/padding area.
Expected
At
origin
────────────────┐
│
│
│
│
│
│
│
│
│
│
│
│
│
│
└────────────────────────┘
Actual
At
origin
────────────────┐
│
│
│
│
│
│
│
│
│
│
│
│
│
│
└────────────────────────┘
Overlay : Expected + Actual
At
origin
────────────────┐
│
│
│
│
│
│
│
│
│
│
│
│
│
│
└────────────────────────┘
At
origin
────────────────┐
│
│
│
│
│
│
│
│
│
│
│
│
│
│
└────────────────────────┘
Actual opacity:
50%
Snapshot (no differences to highlight)
At
origin
────────────────┐
│
│
│
│
│
│
│
│
│
│
│
│
│
│
└────────────────────────┘
Gray column with three children stacked vertically. Red 'Header' at top, teal 20x4 stack with blue 'Stacked' in middle, orange 'Footer' at bottom.
Expected
Header
Stacked
Footer
Actual
Header
Stacked
Footer
Overlay : Expected + Actual
Header
Stacked
Footer
Header
Stacked
Footer
Actual opacity:
50%
Snapshot (no differences to highlight)
Header
Stacked
Footer
Gray row with three children side by side. Red 'Left' on left, teal 12x4 stack with blue 'Stack' in middle, orange 'Right' on right.
Expected
Left
Stack
Right
Overlay : Expected + Actual
Left
Stack
Right
Left
Stack
Right
Actual opacity:
50%
Snapshot (no differences to highlight)
Left
Stack
Right
Gray 25x8 outer stack. Red 15x5 inner stack at top-left with blue 'Inner Stack'. Green 'Outer' at bottom-right of outer stack.
Expected
Inner
Stack
Outer
Overlay : Expected + Actual
Inner
Stack
Outer
Inner
Stack
Outer
Actual opacity:
50%
Snapshot (no differences to highlight)
Inner
Stack
Outer
Gray 20x6 stack with center alignment. Blue 'Centered' at center (uses alignment). Red 'TR' at top-right corner, green 'BL' at bottom-left (positioned, ignore alignment).
Overlay : Expected + Actual
TR
Centered
BL
TR
Centered
BL
Actual opacity:
50%
Snapshot (no differences to highlight)
TR
Centered
BL
Snapshot (no differences to highlight)
50%
Snapshot (no differences to highlight)
Full
Snapshot (no differences to highlight)
30%
70%
Snapshot (no differences to highlight)
60%
60%
Snapshot (no differences to highlight)
Auto
Snapshot (no differences to highlight)
50%
Snapshot (no differences to highlight)
25%
25%
50%
Snapshot (no differences to highlight)
Fixed
50%
Snapshot (no differences to highlight)
30%
Flex
Snapshot (no differences to highlight)
50%
Auto
Blue wrapped text would exceed 3 lines but is clamped by MaxHeight. Gray container remains 12x6.
Expected
one
two
three
four
five
six
Actual
one
two
three
four
five
six
Overlay : Expected + Actual
one
two
three
four
five
six
one
two
three
four
five
six
Actual opacity:
50%
Snapshot (no differences to highlight)
one
two
three
four
five
six
Green text is constrained to 25% height (5 rows) even though content would wrap taller. Gray container is 12x20.
Expected
alpha
beta
gamma
delta
epsilon
zeta
eta
theta
iota
kappa
Actual
alpha
beta
gamma
delta
epsilon
zeta
eta
theta
iota
kappa
Overlay : Expected + Actual
alpha
beta
gamma
delta
epsilon
zeta
eta
theta
iota
kappa
alpha
beta
gamma
delta
epsilon
zeta
eta
theta
iota
kappa
Actual opacity:
50%
Snapshot (no differences to highlight)
alpha
beta
gamma
delta
epsilon
zeta
eta
theta
iota
kappa
Purple text is flexed but capped at MaxHeight (5 rows) despite available space. Gray container is 12x20.
Expected
red
orange
yellow
green
blue
indigo
violet
black
white
gray
Actual
red
orange
yellow
green
blue
indigo
violet
black
white
gray
Overlay : Expected + Actual
red
orange
yellow
green
blue
indigo
violet
black
white
gray
red
orange
yellow
green
blue
indigo
violet
black
white
gray
Actual opacity:
50%
Snapshot (no differences to highlight)
red
orange
yellow
green
blue
indigo
violet
black
white
gray
Snapshot (no differences to highlight)
50%
Snapshot (no differences to highlight)
50%
50%
Snapshot (no differences to highlight)
50%
Snapshot (no differences to highlight)
50%
Snapshot (no differences to highlight)
50%
Snapshot (no differences to highlight)
Header
Body
Snapshot (no differences to highlight)
50%
Snapshot (no differences to highlight)
50%
Snapshot (no differences to highlight)
50x50
Snapshot (no differences to highlight)
50%
15x5 column with gray square border (┌─┐│└─┘ characters). 'Square' text inside, inset by 1 cell.
Expected
┌─────────────┐
│
Square
│
│
│
│
│
└─────────────┘
Actual
┌─────────────┐
│
Square
│
│
│
│
│
└─────────────┘
Overlay : Expected + Actual
┌─────────────┐
│
Square
│
│
│
│
│
└─────────────┘
┌─────────────┐
│
Square
│
│
│
│
│
└─────────────┘
Actual opacity:
50%
Snapshot (no differences to highlight)
┌─────────────┐
│
Square
│
│
│
│
│
└─────────────┘
15x5 column with gray rounded border (╭─╮│╰─╯ characters). 'Rounded' text inside, corners are curved.
Expected
╭─────────────╮
│
Rounded
│
│
│
│
│
╰─────────────╯
Actual
╭─────────────╮
│
Rounded
│
│
│
│
│
╰─────────────╯
Overlay : Expected + Actual
╭─────────────╮
│
Rounded
│
│
│
│
│
╰─────────────╯
╭─────────────╮
│
Rounded
│
│
│
│
│
╰─────────────╯
Actual opacity:
50%
Snapshot (no differences to highlight)
╭─────────────╮
│
Rounded
│
│
│
│
│
╰─────────────╯
15x5 column with gray double-line border (╔═╗║╚═╝ characters). 'Double' text inside.
Expected
╔═════════════╗
║
Double
║
║
║
║
║
╚═════════════╝
Actual
╔═════════════╗
║
Double
║
║
║
║
║
╚═════════════╝
Overlay : Expected + Actual
╔═════════════╗
║
Double
║
║
║
║
║
╚═════════════╝
╔═════════════╗
║
Double
║
║
║
║
║
╚═════════════╝
Actual opacity:
50%
Snapshot (no differences to highlight)
╔═════════════╗
║
Double
║
║
║
║
║
╚═════════════╝
15x5 column with gray heavy/thick border (┏━┓┃┗━┛ characters). 'Heavy' text inside.
Expected
┏━━━━━━━━━━━━━┓
┃
Heavy
┃
┃
┃
┃
┃
┗━━━━━━━━━━━━━┛
Actual
┏━━━━━━━━━━━━━┓
┃
Heavy
┃
┃
┃
┃
┃
┗━━━━━━━━━━━━━┛
Overlay : Expected + Actual
┏━━━━━━━━━━━━━┓
┃
Heavy
┃
┃
┃
┃
┃
┗━━━━━━━━━━━━━┛
┏━━━━━━━━━━━━━┓
┃
Heavy
┃
┃
┃
┃
┃
┗━━━━━━━━━━━━━┛
Actual opacity:
50%
Snapshot (no differences to highlight)
┏━━━━━━━━━━━━━┓
┃
Heavy
┃
┃
┃
┃
┃
┗━━━━━━━━━━━━━┛
15x5 column with gray ASCII border (+-+|+-+ characters). 'ASCII' text inside.
Expected
+-------------+
|
ASCII
|
|
|
|
|
+-------------+
Actual
+-------------+
|
ASCII
|
|
|
|
|
+-------------+
Overlay : Expected + Actual
+-------------+
|
ASCII
|
|
|
|
|
+-------------+
+-------------+
|
ASCII
|
|
|
|
|
+-------------+
Actual opacity:
50%
Snapshot (no differences to highlight)
+-------------+
|
ASCII
|
|
|
|
|
+-------------+
20x5 column with square border. 'Title' text embedded in top border line. 'Content' inside.
Expected
┌
Title
───────────┐
│
Content
│
│
│
│
│
└──────────────────┘
Actual
┌
Title
───────────┐
│
Content
│
│
│
│
│
└──────────────────┘
Overlay : Expected + Actual
┌
Title
───────────┐
│
Content
│
│
│
│
│
└──────────────────┘
┌
Title
───────────┐
│
Content
│
│
│
│
│
└──────────────────┘
Actual opacity:
50%
Snapshot (no differences to highlight)
┌
Title
───────────┐
│
Content
│
│
│
│
│
└──────────────────┘
20x5 column with rounded border. 'Footer' text embedded in bottom border line. 'Body' inside.
Expected
╭──────────────────╮
│
Body
│
│
│
│
│
╰
Footer
──────────╯
Actual
╭──────────────────╮
│
Body
│
│
│
│
│
╰
Footer
──────────╯
Overlay : Expected + Actual
╭──────────────────╮
│
Body
│
│
│
│
│
╰
Footer
──────────╯
╭──────────────────╮
│
Body
│
│
│
│
│
╰
Footer
──────────╯
Actual opacity:
50%
Snapshot (no differences to highlight)
╭──────────────────╮
│
Body
│
│
│
│
│
╰
Footer
──────────╯
25x5 column with square border. 'Bold Title' in bold text embedded in top border. 'Content' inside.
Expected
┌
Bold
Title
───────────┐
│
Content
│
│
│
│
│
└───────────────────────┘
Actual
┌
Bold
Title
───────────┐
│
Content
│
│
│
│
│
└───────────────────────┘
Overlay : Expected + Actual
┌
Bold
Title
───────────┐
│
Content
│
│
│
│
│
└───────────────────────┘
┌
Bold
Title
───────────┐
│
Content
│
│
│
│
│
└───────────────────────┘
Actual opacity:
50%
Snapshot (no differences to highlight)
┌
Bold
Title
───────────┐
│
Content
│
│
│
│
│
└───────────────────────┘
30x5 column with square border. Title 'ESC close' where 'ESC' is bold and accent-colored. 'Dialog content' inside.
Expected
┌
ESC
close
─────────────────┐
│
Dialog
content
│
│
│
│
│
└────────────────────────────┘
Actual
┌
ESC
close
─────────────────┐
│
Dialog
content
│
│
│
│
│
└────────────────────────────┘
Overlay : Expected + Actual
┌
ESC
close
─────────────────┐
│
Dialog
content
│
│
│
│
│
└────────────────────────────┘
┌
ESC
close
─────────────────┐
│
Dialog
content
│
│
│
│
│
└────────────────────────────┘
Actual opacity:
50%
Snapshot (no differences to highlight)
┌
ESC
close
─────────────────┐
│
Dialog
content
│
│
│
│
│
└────────────────────────────┘
30x5 column with square border. 'Styled' in italic at top-left, 'Plain' at top-right. 'Mixed decorations' inside.
Expected
┌
Styled
─────────────
Plain
┐
│
Mixed
decorations
│
│
│
│
│
└────────────────────────────┘
Actual
┌
Styled
─────────────
Plain
┐
│
Mixed
decorations
│
│
│
│
│
└────────────────────────────┘
Overlay : Expected + Actual
┌
Styled
─────────────
Plain
┐
│
Mixed
decorations
│
│
│
│
│
└────────────────────────────┘
┌
Styled
─────────────
Plain
┐
│
Mixed
decorations
│
│
│
│
│
└────────────────────────────┘
Actual opacity:
50%
Snapshot (no differences to highlight)
┌
Styled
─────────────
Plain
┐
│
Mixed
decorations
│
│
│
│
│
└────────────────────────────┘
30x5 column with rounded gradient border (red to blue). 'Gradient Title' in bold, color sampled from gradient at title position.
Expected
╭
G
r
a
d
i
e
n
t
T
i
t
l
e
─
─
─
─
─
─
─
─
─
─
─
─
╮
│
Content
│
│
│
│
│
╰
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
╯
Actual
╭
G
r
a
d
i
e
n
t
T
i
t
l
e
─
─
─
─
─
─
─
─
─
─
─
─
╮
│
Content
│
│
│
│
│
╰
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
╯
Overlay : Expected + Actual
╭
G
r
a
d
i
e
n
t
T
i
t
l
e
─
─
─
─
─
─
─
─
─
─
─
─
╮
│
Content
│
│
│
│
│
╰
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
╯
╭
G
r
a
d
i
e
n
t
T
i
t
l
e
─
─
─
─
─
─
─
─
─
─
─
─
╮
│
Content
│
│
│
│
│
╰
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
╯
Actual opacity:
50%
Snapshot (no differences to highlight)
╭
G
r
a
d
i
e
n
t
T
i
t
l
e
─
─
─
─
─
─
─
─
─
─
─
─
╮
│
Content
│
│
│
│
│
╰
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
╯
30x5 column with rounded gradient border (red to blue). 'Green Title' in bold green, overriding the gradient color.
Expected
╭
Green
Title
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
╮
│
Content
│
│
│
│
│
╰
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
╯
Actual
╭
Green
Title
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
╮
│
Content
│
│
│
│
│
╰
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
╯
Overlay : Expected + Actual
╭
Green
Title
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
╮
│
Content
│
│
│
│
│
╰
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
╯
╭
Green
Title
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
╮
│
Content
│
│
│
│
│
╰
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
╯
Actual opacity:
50%
Snapshot (no differences to highlight)
╭
Green
Title
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
╮
│
Content
│
│
│
│
│
╰
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
─
╯
20x7 dark blue column with 2-cell padding on all sides. 'Padded' text inset by 2 cells from each edge.
Snapshot (no differences to highlight)
Padded
20x7 dark green column with asymmetric padding: top=1, right=3, bottom=1, left=2. 'Asymmetric' text offset accordingly.
Snapshot (no differences to highlight)
Asymmetric
20x7 dark red column with horizontal padding=3, vertical padding=1. 'XY Padding' text inset 3 from sides, 1 from top/bottom.
Snapshot (no differences to highlight)
XY
Padding
Dark blue outer column. Light purple 15x3 inner column with 1-cell margin on all sides. Gap between inner and outer visible.
Snapshot (no differences to highlight)
Margin
White text 'With Background' on purple background (RGB 100,50,150). Background extends to text width.
Overlay : Expected + Actual
With
Background
With
Background
Actual opacity:
50%
Snapshot (no differences to highlight)
With
Background
Overlay : Expected + Actual
G
r
a
d
i
e
n
t
G
r
a
d
i
e
n
t
Actual opacity:
50%
Snapshot (no differences to highlight)
G
r
a
d
i
e
n
t
Orange text 'Colored Text' (RGB 255,128,0) on black background.
Overlay : Expected + Actual
Colored
Text
Colored
Text
Actual opacity:
50%
Snapshot (no differences to highlight)
Colored
Text
White text 'Full Color' on blue background (RGB 0,100,200). Both foreground and background colors applied.
Snapshot (no differences to highlight)
Full
Color
White 'Bold Text' in bold weight at top-left on black background.
Snapshot (no differences to highlight)
Bold
Text
White 'Italic Text' in italic style at top-left on black background.
Snapshot (no differences to highlight)
Italic
Text
White 'Underlined Text' with single underline at top-left on black background.
Overlay : Expected + Actual
Underlined
Text
Underlined
Text
Actual opacity:
50%
Snapshot (no differences to highlight)
Underlined
Text
White 'Struck Text' with strikethrough line at top-left on black background.
Snapshot (no differences to highlight)
Struck
Text
White 'Combined' text in both bold and italic at top-left on black background.
Snapshot (no differences to highlight)
Combined
20x7 column with green rounded border. 'Boxed' text inset by border (1 cell) plus padding (1 cell) = 2 cells from each edge.
Expected
╭──────────────────╮
│
│
│
Boxed
│
│
│
│
│
│
│
╰──────────────────╯
Actual
╭──────────────────╮
│
│
│
Boxed
│
│
│
│
│
│
│
╰──────────────────╯
Overlay : Expected + Actual
╭──────────────────╮
│
│
│
Boxed
│
│
│
│
│
│
│
╰──────────────────╯
╭──────────────────╮
│
│
│
Boxed
│
│
│
│
│
│
│
╰──────────────────╯
Actual opacity:
50%
Snapshot (no differences to highlight)
╭──────────────────╮
│
│
│
Boxed
│
│
│
│
│
│
│
╰──────────────────╯
25x9 column with gray square border, 'Window' title in top border, dark blue background. Orange bold 'Hello' text inset 2 cells (border+padding).
Expected
┌
Window
───────────────┐
│
│
│
Hello
│
│
│
│
│
│
│
│
│
│
│
└───────────────────────┘
Actual
┌
Window
───────────────┐
│
│
│
Hello
│
│
│
│
│
│
│
│
│
│
│
└───────────────────────┘
Overlay : Expected + Actual
┌
Window
───────────────┐
│
│
│
Hello
│
│
│
│
│
│
│
│
│
│
│
└───────────────────────┘
┌
Window
───────────────┐
│
│
│
Hello
│
│
│
│
│
│
│
│
│
│
│
└───────────────────────┘
Actual opacity:
50%
Snapshot (no differences to highlight)
┌
Window
───────────────┐
│
│
│
Hello
│
│
│
│
│
│
│
│
│
│
│
└───────────────────────┘
Single line with mixed colors: 'Red' in red, ' and ' in white, 'Blue' in blue. All on black background.
Overlay : Expected + Actual
Red
and
Blue
Red
and
Blue
Actual opacity:
50%
Snapshot (no differences to highlight)
Red
and
Blue
Single line with 'Important' in bold followed by ' text' in normal weight. White on black.
Overlay : Expected + Actual
Important
text
Important
text
Actual opacity:
50%
Snapshot (no differences to highlight)
Important
text
Single line with 'Emphasis' in italic followed by ' here' in normal style. White on black.
Overlay : Expected + Actual
Emphasis
here
Emphasis
here
Actual opacity:
50%
Snapshot (no differences to highlight)
Emphasis
here
Six text rows showing named colors. 'Red' in red on row 1, 'Green' in green on row 2, 'Blue' in blue on row 3, 'Yellow' in yellow on row 4, 'Magenta' in magenta on row 5, 'Cyan' in cyan on row 6.
Expected
Red
Green
Blue
Yellow
Magenta
Cyan
Actual
Red
Green
Blue
Yellow
Magenta
Cyan
Overlay : Expected + Actual
Red
Green
Blue
Yellow
Magenta
Cyan
Red
Green
Blue
Yellow
Magenta
Cyan
Actual opacity:
50%
Snapshot (no differences to highlight)
Red
Green
Blue
Yellow
Magenta
Cyan
Outer 25x10 column with blue rounded border. Inner column with red square border nested inside. 'Inner' text inside the inner border.
Expected
╭───────────────────────╮
│
┌─────┐
│
│
│
Inner
│
│
│
└─────┘
│
│
│
│
│
│
│
│
│
│
│
╰───────────────────────╯
Actual
╭───────────────────────╮
│
┌─────┐
│
│
│
Inner
│
│
│
└─────┘
│
│
│
│
│
│
│
│
│
│
│
╰───────────────────────╯
Overlay : Expected + Actual
╭───────────────────────╮
│
┌─────┐
│
│
│
Inner
│
│
│
└─────┘
│
│
│
│
│
│
│
│
│
│
│
╰───────────────────────╯
╭───────────────────────╮
│
┌─────┐
│
│
│
Inner
│
│
│
└─────┘
│
│
│
│
│
│
│
│
│
│
│
╰───────────────────────╯
Actual opacity:
50%
Snapshot (no differences to highlight)
╭───────────────────────╮
│
┌─────┐
│
│
│
Inner
│
│
│
└─────┘
│
│
│
│
│
│
│
│
│
│
│
╰───────────────────────╯
Row with three colored letters: red 'A', green 'B', blue 'C' arranged horizontally from left to right.
Snapshot (no differences to highlight)
A
B
C
Three tabs in a row. 'Home' is active (highlighted), 'Settings' and 'Profile' inactive. Each tab has padding.
Expected
Home
Settings
Profile
Actual
Home
Settings
Profile
Overlay : Expected + Actual
Home
Settings
Profile
Home
Settings
Profile
Actual opacity:
50%
Snapshot (no differences to highlight)
Home
Settings
Profile
Three tabs with 'Settings' active (highlighted). 'Home' and 'Profile' inactive.
Expected
Home
Settings
Profile
Actual
Home
Settings
Profile
Overlay : Expected + Actual
Home
Settings
Profile
Home
Settings
Profile
Actual opacity:
50%
Snapshot (no differences to highlight)
Home
Settings
Profile
Three tabs with 'Profile' active (highlighted). 'Home' and 'Settings' inactive.
Expected
Home
Settings
Profile
Actual
Home
Settings
Profile
Overlay : Expected + Actual
Home
Settings
Profile
Home
Settings
Profile
Actual opacity:
50%
Snapshot (no differences to highlight)
Home
Settings
Profile
Single tab 'Only Tab' displayed as active.
Snapshot (no differences to highlight)
Only
Tab
Two tabs with close buttons (×). 'Home ×' active, 'Settings ×' inactive.
Expected
Home
×
Settings
×
Overlay : Expected + Actual
Home
×
Settings
×
Home
×
Settings
×
Actual opacity:
50%
Snapshot (no differences to highlight)
Home
×
Settings
×
Two tabs with custom colors. Active 'Tab A' blue background, inactive 'Tab B' dark gray.
Snapshot (no differences to highlight)
Tab
A
Tab
B
Tab bar with dark background. Two tabs on dark gray container.
Overlay : Expected + Actual
Home
Settings
Home
Settings
Actual opacity:
50%
Snapshot (no differences to highlight)
Home
Settings
Five tabs in a row. 'Tab 1' active, others inactive. Tabs extend horizontally.
Expected
Tab
1
Tab
2
Tab
3
Tab
4
Tab
5
Actual
Tab
1
Tab
2
Tab
3
Tab
4
Tab
5
Overlay : Expected + Actual
Tab
1
Tab
2
Tab
3
Tab
4
Tab
5
Tab
1
Tab
2
Tab
3
Tab
4
Tab
5
Actual opacity:
50%
Snapshot (no differences to highlight)
Tab
1
Tab
2
Tab
3
Tab
4
Tab
5
Empty tab bar with no tabs rendered.
Snapshot (no differences to highlight)
Tab bar with nil state renders as empty row.
Snapshot (no differences to highlight)
Tab view with 'Home' tab active. Tab bar at top, 'Home content goes here' below.
Expected
Home
Settings
Home
content
goes
here
Actual
Home
Settings
Home
content
goes
here
Overlay : Expected + Actual
Home
Settings
Home
content
goes
here
Home
Settings
Home
content
goes
here
Actual opacity:
50%
Snapshot (no differences to highlight)
Home
Settings
Home
content
goes
here
Tab view with 'Settings' active. Shows 'Settings panel with options' content.
Expected
Home
Settings
Settings
panel
with
options
Actual
Home
Settings
Settings
panel
with
options
Overlay : Expected + Actual
Home
Settings
Settings
panel
with
options
Home
Settings
Settings
panel
with
options
Actual opacity:
50%
Snapshot (no differences to highlight)
Home
Settings
Settings
panel
with
options
Tab view with 'List' tab showing green items stacked vertically in content area.
Expected
List
Empty
Item
1
Item
2
Item
3
Actual
List
Empty
Item
1
Item
2
Item
3
Overlay : Expected + Actual
List
Empty
Item
1
Item
2
Item
3
List
Empty
Item
1
Item
2
Item
3
Actual opacity:
50%
Snapshot (no differences to highlight)
List
Empty
Item
1
Item
2
Item
3
Tab view with closable tabs. 'file.go ×' active with code content, 'test.go ×' inactive.
Expected
file.go
×
test.go
×
package
main
Actual
file.go
×
test.go
×
package
main
Overlay : Expected + Actual
file.go
×
test.go
×
package
main
file.go
×
test.go
×
package
main
Actual opacity:
50%
Snapshot (no differences to highlight)
file.go
×
test.go
×
package
main
Tab view with custom dark theme. Tab bar slightly lighter, content area dark.
Expected
Tab
A
Tab
B
Content
A
Actual
Tab
A
Tab
B
Content
A
Overlay : Expected + Actual
Tab
A
Tab
B
Content
A
Tab
A
Tab
B
Content
A
Actual opacity:
50%
Snapshot (no differences to highlight)
Tab
A
Tab
B
Content
A
Empty tab view with no tabs. Just an empty column.
Snapshot (no differences to highlight)
Tab view with nil state renders as empty column.
Snapshot (no differences to highlight)
Tab view where active tab has nil content. Shows tab bar but empty content area.
Snapshot (no differences to highlight)
No
Content
Dock layout with TabBar docked at top. Tab bar dark gray, body darker below.
Expected
Home
About
Main
content
area
Actual
Home
About
Main
content
area
Overlay : Expected + Actual
Home
About
Main
content
area
Home
About
Main
content
area
Actual opacity:
50%
Snapshot (no differences to highlight)
Home
About
Main
content
area
Dock with TabBar at top, KeybindBar at bottom. Shows tab navigation keybinds in footer.
Expected
Home
Settings
Content
h
Prev
Tab
l
Next
Tab
Actual
Home
Settings
Content
h
Prev
Tab
l
Next
Tab
Overlay : Expected + Actual
Home
Settings
Content
h
Prev
Tab
l
Next
Tab
Home
Settings
Content
h
Prev
Tab
l
Next
Tab
Actual opacity:
50%
Snapshot (no differences to highlight)
Home
Settings
Content
h
Prev
Tab
l
Next
Tab
After SelectNext on last tab, first tab 'Home' is now active. Demonstrates wrap-around navigation.
Expected
Home
Settings
Profile
Actual
Home
Settings
Profile
Overlay : Expected + Actual
Home
Settings
Profile
Home
Settings
Profile
Actual opacity:
50%
Snapshot (no differences to highlight)
Home
Settings
Profile
After SelectPrevious on first tab, last tab 'Profile' is now active. Demonstrates wrap-around navigation.
Expected
Home
Settings
Profile
Actual
Home
Settings
Profile
Overlay : Expected + Actual
Home
Settings
Profile
Home
Settings
Profile
Actual opacity:
50%
Snapshot (no differences to highlight)
Home
Settings
Profile
After removing middle active tab 'Settings', 'Profile' (next tab) becomes active. Two tabs remain.
Overlay : Expected + Actual
Home
Profile
Home
Profile
Actual opacity:
50%
Snapshot (no differences to highlight)
Home
Profile
After removing last active tab 'Profile', 'Settings' (previous tab) becomes active. Two tabs remain.
Overlay : Expected + Actual
Home
Settings
Home
Settings
Actual opacity:
50%
Snapshot (no differences to highlight)
Home
Settings
After removing the only tab, tab bar is empty with no tabs rendered.
Snapshot (no differences to highlight)
After MoveTabLeft, order is 'Settings' (active), 'Home', 'Profile'. Settings moved from middle to first.
Expected
Settings
Home
Profile
Actual
Settings
Home
Profile
Overlay : Expected + Actual
Settings
Home
Profile
Settings
Home
Profile
Actual opacity:
50%
Snapshot (no differences to highlight)
Settings
Home
Profile
After MoveTabRight, order is 'Home', 'Profile', 'Settings' (active). Settings moved from middle to last.
Expected
Home
Profile
Settings
Actual
Home
Profile
Settings
Overlay : Expected + Actual
Home
Profile
Settings
Home
Profile
Settings
Actual opacity:
50%
Snapshot (no differences to highlight)
Home
Profile
Settings
After AddTab, three tabs shown: 'Home' (active), 'Settings', 'New Tab'. New tab appended at end.
Expected
Home
Settings
New
Tab
Actual
Home
Settings
New
Tab
Overlay : Expected + Actual
Home
Settings
New
Tab
Home
Settings
New
Tab
Actual opacity:
50%
Snapshot (no differences to highlight)
Home
Settings
New
Tab
After InsertTab at index 0, order is 'First', 'Home' (active), 'Settings'. New tab inserted at start.
Expected
First
Home
Settings
Actual
First
Home
Settings
Overlay : Expected + Actual
First
Home
Settings
First
Home
Settings
Actual opacity:
50%
Snapshot (no differences to highlight)
First
Home
Settings
After InsertTab at index 1, order is 'Home' (active), 'Middle', 'Settings'. New tab inserted in middle.
Expected
Home
Middle
Settings
Actual
Home
Middle
Settings
Overlay : Expected + Actual
Home
Middle
Settings
Home
Middle
Settings
Actual opacity:
50%
Snapshot (no differences to highlight)
Home
Middle
Settings
After adding tab to empty state, 'First Tab' is shown and automatically becomes active.
Snapshot (no differences to highlight)
First
Tab
After SetLabel, first tab shows 'Dashboard' (active) instead of 'Home'. Second tab 'Settings' unchanged.
Expected
Dashboard
Settings
Actual
Dashboard
Settings
Overlay : Expected + Actual
Dashboard
Settings
Dashboard
Settings
Actual opacity:
50%
Snapshot (no differences to highlight)
Dashboard
Settings
TabBar with Closable=true. KeybindBar shows h/l navigation keybinds. Tabs have close buttons (×).
Expected
Home
×
Settings
×
Content
h
Prev
Tab
l
Next
Tab
Actual
Home
×
Settings
×
Content
h
Prev
Tab
l
Next
Tab
Overlay : Expected + Actual
Home
×
Settings
×
Content
h
Prev
Tab
l
Next
Tab
Home
×
Settings
×
Content
h
Prev
Tab
l
Next
Tab
Actual opacity:
50%
Snapshot (no differences to highlight)
Home
×
Settings
×
Content
h
Prev
Tab
l
Next
Tab
TabBar with AllowReorder=true. KeybindBar shows ctrl+h 'Move Left', ctrl+l 'Move Right' in addition to navigation.
Expected
Home
Settings
Content
h
Prev
Tab
l
Next
Tab
ctrl+h
Move
Left
ctrl+l
Move
Right
Actual
Home
Settings
Content
h
Prev
Tab
l
Next
Tab
ctrl+h
Move
Left
ctrl+l
Move
Right
Overlay : Expected + Actual
Home
Settings
Content
h
Prev
Tab
l
Next
Tab
ctrl+h
Move
Left
ctrl+l
Move
Right
Home
Settings
Content
h
Prev
Tab
l
Next
Tab
ctrl+h
Move
Left
ctrl+l
Move
Right
Actual opacity:
50%
Snapshot (no differences to highlight)
Home
Settings
Content
h
Prev
Tab
l
Next
Tab
ctrl+h
Move
Left
ctrl+l
Move
Right
TabBar with Alt+Numbers pattern. KeybindBar shows standard h/l navigation (position keybinds are hidden).
Expected
Home
Settings
Content
h
Prev
Tab
l
Next
Tab
Actual
Home
Settings
Content
h
Prev
Tab
l
Next
Tab
Overlay : Expected + Actual
Home
Settings
Content
h
Prev
Tab
l
Next
Tab
Home
Settings
Content
h
Prev
Tab
l
Next
Tab
Actual opacity:
50%
Snapshot (no differences to highlight)
Home
Settings
Content
h
Prev
Tab
l
Next
Tab
TabBar with Ctrl+Numbers pattern. KeybindBar shows standard h/l navigation (position keybinds are hidden).
Expected
Home
Settings
Content
h
Prev
Tab
l
Next
Tab
Actual
Home
Settings
Content
h
Prev
Tab
l
Next
Tab
Overlay : Expected + Actual
Home
Settings
Content
h
Prev
Tab
l
Next
Tab
Home
Settings
Content
h
Prev
Tab
l
Next
Tab
Actual opacity:
50%
Snapshot (no differences to highlight)
Home
Settings
Content
h
Prev
Tab
l
Next
Tab
After SelectNext, TabView shows 'Settings' tab active with 'Settings content here' displayed below.
Expected
Home
Settings
Settings
content
here
Actual
Home
Settings
Settings
content
here
Overlay : Expected + Actual
Home
Settings
Settings
content
here
Home
Settings
Settings
content
here
Actual opacity:
50%
Snapshot (no differences to highlight)
Home
Settings
Settings
content
here
After switching away and back, 'Home' tab content (3 lines) is still displayed correctly.
Expected
Home
Other
Line
1
Line
2
Line
3
Actual
Home
Other
Line
1
Line
2
Line
3
Overlay : Expected + Actual
Home
Other
Line
1
Line
2
Line
3
Home
Other
Line
1
Line
2
Line
3
Actual opacity:
50%
Snapshot (no differences to highlight)
Home
Other
Line
1
Line
2
Line
3
TabView with Closable and AllowReorder. Shows tabs with × buttons and reorder keybinds in KeybindBar.
Expected
main.go
×
test.go
×
util.go
×
package
main
h
Prev
Tab
l
Next
Tab
ctrl+h
Move
Left
ctrl+l
Move
Right
Actual
main.go
×
test.go
×
util.go
×
package
main
h
Prev
Tab
l
Next
Tab
ctrl+h
Move
Left
ctrl+l
Move
Right
Overlay : Expected + Actual
main.go
×
test.go
×
util.go
×
package
main
h
Prev
Tab
l
Next
Tab
ctrl+h
Move
Left
ctrl+l
Move
Right
main.go
×
test.go
×
util.go
×
package
main
h
Prev
Tab
l
Next
Tab
ctrl+h
Move
Left
ctrl+l
Move
Right
Actual opacity:
50%
Snapshot (no differences to highlight)
main.go
×
test.go
×
util.go
×
package
main
h
Prev
Tab
l
Next
Tab
ctrl+h
Move
Left
ctrl+l
Move
Right
TextArea with wrapping enabled. First line on row 1, second line wraps to additional rows. Cursor at start.
Expected
F
irst
line
Second
line
is
long
en
ough
to
wra
Actual
F
irst
line
Second
line
is
long
en
ough
to
wra
Overlay : Expected + Actual
F
irst
line
Second
line
is
long
en
ough
to
wra
F
irst
line
Second
line
is
long
en
ough
to
wra
Actual opacity:
50%
Snapshot (no differences to highlight)
F
irst
line
Second
line
is
long
en
ough
to
wra
TextArea with wrapping disabled. Long line scrolls horizontally so the cursor at the end is visible.
Snapshot (no differences to highlight)
789ABCDEF
TextArea with 'hello' selected using theme Selection colors.
Snapshot (no differences to highlight)
hello
world
TextArea with multi-line selection spanning from 'line' on first row through part of second row.
Expected
first
line
second
l
ine
third
line
Actual
first
line
second
l
ine
third
line
Overlay : Expected + Actual
first
line
second
l
ine
third
line
first
line
second
l
ine
third
line
Actual opacity:
50%
Snapshot (no differences to highlight)
first
line
second
l
ine
third
line
TextArea in read-only mode with cursor on line 2. Cursor should be visible but editing is disabled.
Expected
line
1
l
i
ne
2
line
3
Actual
line
1
l
i
ne
2
line
3
Overlay : Expected + Actual
line
1
l
i
ne
2
line
3
line
1
l
i
ne
2
line
3
Actual opacity:
50%
Snapshot (no differences to highlight)
line
1
l
i
ne
2
line
3
Empty TextInput with placeholder, focused. First placeholder character should be visible under cursor (reversed).
Overlay : Expected + Actual
T
ype
here...
T
ype
here...
Actual opacity:
50%
Snapshot (no differences to highlight)
T
ype
here...
Empty TextInput with placeholder, unfocused. Full placeholder text visible without cursor.
Overlay : Expected + Actual
[]
Type
here...
[]
Type
here...
Actual opacity:
50%
Snapshot (no differences to highlight)
[]
Type
here...
TextInput with 'hello' selected (first 5 chars). Selection should be highlighted.
Snapshot (no differences to highlight)
hello
world
TextInput with all text selected. Entire text should be highlighted with cursor at end.
Snapshot (no differences to highlight)
hello
world
TextInput with 'world' selected in middle. Only 'world' should be highlighted.
Overlay : Expected + Actual
hello
world
foo
hello
world
foo
Actual opacity:
50%
Snapshot (no differences to highlight)
hello
world
foo
TextInput in read-only mode with cursor in middle. Cursor should be visible but editing is disabled.
Expected
read-
o
nly
text
Overlay : Expected + Actual
read-
o
nly
text
read-
o
nly
text
Actual opacity:
50%
Snapshot (no differences to highlight)
read-
o
nly
text
Button '[Click me]' at top-left. No tooltip visible because button is not focused.
Overlay : Expected + Actual
[
Click
me
]
[
Click
me
]
Actual opacity:
50%
Snapshot (no differences to highlight)
[
Click
me
]
Button '[Target]' at row 3. Tooltip ' Help text ' on surface background positioned directly ABOVE button (no gap). Tooltip horizontally centered over button.
Expected
Help
text
[
Target
]
Actual
Help
text
[
Target
]
Overlay : Expected + Actual
Help
text
[
Target
]
Help
text
[
Target
]
Actual opacity:
50%
Snapshot (no differences to highlight)
Help
text
[
Target
]
Button '[Target]' at row 0. Tooltip ' Help text ' on surface background positioned directly BELOW button (no gap). Tooltip horizontally centered under button.
Expected
[
Target
]
Help
text
Actual
[
Target
]
Help
text
Overlay : Expected + Actual
[
Target
]
Help
text
[
Target
]
Help
text
Actual opacity:
50%
Snapshot (no differences to highlight)
[
Target
]
Help
text
Tooltip ' Help ' on left, then button '[Target]' on right (no gap between them).
Overlay : Expected + Actual
Help
[
Target
]
Help
[
Target
]
Actual opacity:
50%
Snapshot (no differences to highlight)
Help
[
Target
]
Button '[Target]' on left, then tooltip ' Help ' on right (no gap between them).
Overlay : Expected + Actual
[
Target
]
Help
[
Target
]
Help
Actual opacity:
50%
Snapshot (no differences to highlight)
[
Target
]
Help
Button '[Save]' at top. Tooltip below with ' Ctrl+S to save ' where 'Ctrl+S' is BOLD. Surface background, 1-cell horizontal padding.
Expected
[
Save
]
Ctrl+S
to
save
Actual
[
Save
]
Ctrl+S
to
save
Overlay : Expected + Actual
[
Save
]
Ctrl+S
to
save
[
Save
]
Ctrl+S
to
save
Actual opacity:
50%
Snapshot (no differences to highlight)
[
Save
]
Ctrl+S
to
save
Button '[Target]' at top. Tooltip below with DOUBLE-LINE border, dark blue background (#323264), white text 'Styled', 1 cell padding on all sides.
Expected
[
Target
]
╔════════╗
║
║
║
Styled
║
║
║
╚════════╝
Actual
[
Target
]
╔════════╗
║
║
║
Styled
║
║
║
╚════════╝
Overlay : Expected + Actual
[
Target
]
╔════════╗
║
║
║
Styled
║
║
║
╚════════╝
[
Target
]
╔════════╗
║
║
║
Styled
║
║
║
╚════════╝
Actual opacity:
50%
Snapshot (no differences to highlight)
[
Target
]
╔════════╗
║
║
║
Styled
║
║
║
╚════════╝
Button '[Target]' at top. Tooltip ' Help ' below with 2 empty rows between button and tooltip.
Overlay : Expected + Actual
[
Target
]
Help
[
Target
]
Help
Actual opacity:
50%
Snapshot (no differences to highlight)
[
Target
]
Help
Vertical stack: 'Header' at top, '[Click me]' button in middle, 'Footer' at bottom. NO tooltip visible.
Expected
Header
[
Click
me
]
Footer
Actual
Header
[
Click
me
]
Footer
Overlay : Expected + Actual
Header
[
Click
me
]
Footer
Header
[
Click
me
]
Footer
Actual opacity:
50%
Snapshot (no differences to highlight)
Header
[
Click
me
]
Footer
Horizontal row: 'Left', then '[Center]' button, then 'Right'. NO tooltip visible.
Expected
Left
[
Center
]
Right
Actual
Left
[
Center
]
Right
Overlay : Expected + Actual
Left
[
Center
]
Right
Left
[
Center
]
Right
Actual opacity:
50%
Snapshot (no differences to highlight)
Left
[
Center
]
Right
Expanded tree with indicators and indentation for nested nodes
Expected
▼
Project
├─
README.md
└─
▼
cmd
└─
main.go
LICENSE
Actual
▼
Project
├─
README.md
└─
▼
cmd
└─
main.go
LICENSE
Overlay : Expected + Actual
▼
Project
├─
README.md
└─
▼
cmd
└─
main.go
LICENSE
▼
Project
├─
README.md
└─
▼
cmd
└─
main.go
LICENSE
Actual opacity:
50%
Snapshot (no differences to highlight)
▼
Project
├─
README.md
└─
▼
cmd
└─
main.go
LICENSE
Root node collapsed with collapse indicator and only top-level nodes visible
Expected
▶
Project
LICENSE
Overlay : Expected + Actual
▶
Project
LICENSE
▶
Project
LICENSE
Actual opacity:
50%
Snapshot (no differences to highlight)
▶
Project
LICENSE
Filtered view showing Project -> cmd -> main.go with ancestors dimmed and match highlighted
Expected
▼
Project
└─▼
cmd
└─
main
.go
Actual
▼
Project
└─▼
cmd
└─
main
.go
Overlay : Expected + Actual
▼
Project
└─▼
cmd
└─
main
.go
▼
Project
└─▼
cmd
└─
main
.go
Actual opacity:
50%
Snapshot (no differences to highlight)
▼
Project
└─▼
cmd
└─
main
.go